<template>
  <view class="achievement-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <image class="user-avatar" :src="userinfo.avatarUrl" />
      <view class="user-info">
        <text class="username">{{userinfo.nickName}}</text>
        <text class="user-level">阅读达人 Lv.1</text>
      </view>
      <view class="reading-days">
        <text class="days-count">116</text>
        <text class="days-label">连续阅读天数</text>
      </view>
    </view>

    <!-- 成就统计 -->
    <view class="stats-section">
      <view class="stats-title">
        <text>我的阅读成就</text>
      </view>

      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{stats.booksRead}}</text>
          <text class="stat-label">已读书籍</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.notesTaken}}</text>
          <text class="stat-label">笔记数量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.reviewsWritten}}</text>
          <text class="stat-label">书评数量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{stats.wordsWritten}}</text>
          <text class="stat-label">累计字数</text>
        </view>
      </view>
    </view>

    <!-- 阅读里程碑 -->
    <view class="milestone-section">
      <view class="section-title">
        <text>阅读里程碑</text>
      </view>

      <view class="milestone-list">
        <view v-for="(item, index) in milestones" :key="index" :class="['milestone-item', {'achieved': item.achieved}]">
          <view class="milestone-icon">
            <text v-if="item.achieved">✓</text>
            <text v-else>{{index + 1}}</text>
          </view>
          <view class="milestone-content">
            <text class="milestone-title">{{item.title}}</text>
            <text class="milestone-desc">{{item.description}}</text>
          </view>
          <view v-if="item.achieved" class="milestone-date">
            <text>{{item.date}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 最近获得的成就 -->
    <view class="badges-section">
      <view class="section-title">
        <text>最近获得的成就</text>
      </view>

      <scroll-view class="badges-scroll" scroll-x="true">
        <view class="badges-container">
          <view v-for="(badge, index) in recentBadges" :key="index" class="badge-item">
            <image class="badge-icon" :src="badge.icon" />
            <text class="badge-name">{{badge.name}}</text>
          </view>
        </view>
      </scroll-view>
    </view>

  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['userinfo'])
    },
    data() {
      return {
        stats: {
          booksRead: 180,
          notesTaken: 136,
          reviewsWritten: 23,
          wordsWritten: "58,742"
        },
        milestones: [{
            title: "阅读第一本书",
            description: "开始你的阅读之旅",
            achieved: true,
            date: "2024-03-15"
          },
          {
            title: "完成10本书",
            description: "初级阅读者",
            achieved: true,
            date: "2024-06-20"
          },
          {
            title: "写下第50条笔记",
            description: "笔记达人",
            achieved: true,
            date: "2024-09-05"
          },
          {
            title: "发表10篇书评",
            description: "书评作者",
            achieved: true,
            date: "2024-11-12"
          },
          {
            title: "阅读50本书",
            description: "资深读者",
            achieved: false,
            date: ""
          },
          {
            title: "连续阅读100天",
            description: "坚持的力量",
            achieved: false,
            date: ""
          }
        ],
        recentBadges: [{
            name: "书评专家",
            icon: "/static/icon/huizhang.png"
          },
          {
            name: "笔记达人",
             icon: "/static/icon/huizhang.png"
          },
          {
            name: "每周读者",
              icon: "/static/icon/huizhang.png"
          },
          {
            name: "经典爱好者",
             icon: "/static/icon/huizhang.png"
          }
        ]
      }
    }
  }
</script>

<style lang="scss">
  .achievement-container {
    padding: 15px;
    background-color: #f8f8f8;
    min-height: 100vh;
  }

  /* 用户信息卡片 */
  .user-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .user-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 15px;
      border: 2px solid #C00000;
    }

    .user-info {
      flex: 1;
      display: flex;
      flex-direction: column;

      .username {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
      }

      .user-level {
        font-size: 14px;
        color: #999;
      }
    }

    .reading-days {
      display: flex;
      flex-direction: column;
      align-items: center;

      .days-count {
        font-size: 24px;
        font-weight: bold;
        color: #C00000;
      }

      .days-label {
        font-size: 12px;
        color: #999;
      }
    }
  }

  /* 统计区域 */
  .stats-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .stats-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;

      .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px 0;

        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #C00000;
          margin-bottom: 5px;
        }

        .stat-label {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  /* 里程碑区域 */
  .milestone-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .milestone-list {
      .milestone-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .milestone-icon {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background-color: #f0f0f0;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          color: #999;
          font-size: 14px;
        }

        .milestone-content {
          flex: 1;
          display: flex;
          flex-direction: column;

          .milestone-title {
            font-size: 15px;
            color: #333;
            margin-bottom: 3px;
          }

          .milestone-desc {
            font-size: 12px;
            color: #999;
          }
        }

        .milestone-date {
          font-size: 12px;
          color: #999;
        }

        &.achieved {
          .milestone-icon {
            background-color: #C00010;
            color: white;
          }

          .milestone-title {
            font-weight: bold;
          }
        }
      }
    }
  }

  /* 徽章区域 */
  .badges-section {
    background-color: #fff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .section-title {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
    }

    .badges-scroll {
      white-space: nowrap;
      width: 100%;

      .badges-container {
        display: inline-flex;
        gap: 15px;
        padding: 5px 0;

        .badge-item {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          width: 80px;

          .badge-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 8px;
          }

          .badge-name {
            font-size: 12px;
            color: #333;
            text-align: center;
            white-space: normal;
            width: 100%;
          }
        }
      }
    }
  }
</style>
